<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <printPreview ref="printPreview" :tableData="formData.details" :tableProps="tableProps" :printFrom="printFrom">
    </printPreview>
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template #label> 上架单号 </template>
        {{ formData.billNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 上架类型 </template>
        {{ formData.labelType === 0 ? '档案上架' : '盒上架' }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label> 库位 </template>
        {{ formData.positionName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 数据来源 </template>
        {{
          formData.dataSources === 0
            ? '平台端'
            : formData.dataSources === 1
              ? '终端设备'
              : '数据接口'
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 上架时间 </template>
        {{ formData.upDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 上架人 </template>
        {{ formData.upBy }}
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="formData.details" border style="width: 100%; margin-top: 20px" max-height="20vh">
      <el-table-column v-if="labelType === 0" prop="archiveNo" label="档号" width=""></el-table-column>
      <el-table-column v-if="labelType === 0" prop="archiveName" label="题名" width=""></el-table-column>
      <el-table-column v-if="labelType === 1" prop="boxNo" label="盒号" width=""></el-table-column>
      <el-table-column v-if="labelType === 1" prop="boxName" label="盒名" width=""></el-table-column>
      <el-table-column prop="rfid" label="rfid号" width=""></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="printUpBill" size="mini">打印上架单</el-button>
      <el-button @click="closeDialog" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getUpBillDetail } from '@/api/rfid/upBill'
import printPreview from '@/components/printPreview.vue'

export default {
  name: 'upBillDialog',
  components: {
    printPreview,
  },
  data() {
    return {
      labelType: null,
      dialogTitle: '',
      dialogVisible: false,
      formData: {},
      formDisabled: false,
      formRules: {},
      printFrom: [],
      tableProps: [],
    }
  },
  created() { },
  methods: {
    // 打印上架单
    printUpBill() {
      // 定义数据来源的映射
      const dataSourceMap = ['平台端', '终端设备', '数据接口']
      this.printFrom = [
        {
          name: '上架单号',
          data: this.formData.billNumber,
        },
        {
          name: '上架类型',
          data: this.formData.labelType === 0 ? '档案上架' : '盒上架',
        },
        {
          name: '库位',
          data: this.formData.positionName,
        },
        {
          name: '数据来源',
          data: dataSourceMap[this.formData.dataSources] || '未知',
        },
        {
          name: '上架时间',
          data: this.formData.upDate,
        },
        {
          name: '上架人',
          data: this.formData.upBy,
        },
      ]
      // 设置表格属性
      this.setTableProps()
      this.$refs.printPreview.open()
    },
    // 根据上架类型设置表格属性
    setTableProps() {
      if (this.labelType === 0) {
        this.tableProps = [
          { props: 'archiveNo', prop: 'archiveNo', title: '档号' },
          { props: 'archiveName', prop: 'archiveName', title: '题名' },
          { props: 'boxNo', prop: 'boxNo', title: '盒号' },
          { props: 'rfid', prop: 'rfid', title: 'rfid号' },
        ]
      } else {
        this.tableProps = [
          { props: 'boxNo', prop: 'boxNo', title: '盒号' },
          { props: 'boxName', prop: 'boxName', title: '盒名' },
          { props: 'rfid', prop: 'rfid', title: 'rfid号' },
        ]
      }
    },
    show(row) {
      this.labelType = row.labelType
      this.formDisabled = true
      this.dialogTitle = '上架信息'
      getUpBillDetail(row.billNumber)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data
            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    closeDialog() {
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.dialog-form {
  padding: 0 30px;
  /* 根据需求调整数值 */
}

.el-table {
  display: flex;
  flex-direction: column;
}

.el-table__header-wrapper {
  overflow: unset;
}
</style>
